<template>
  <div ref="dsvg" class="kk-pagination" :style="Style.Basis" v-if="Cache">
    <div :style="Style.ButBox">
      <button class="kk-pagination-icon" />
    </div>
    <div style="height:100%;" v-for="(item,index) in Cache" :key="index">
      <button>
        <svg>
          <text>{{item}}</text>
        </svg>
      </button>
    </div>
    <div :style="Style.ButBox">
      <button class="kk-pagination-icon" style="transform:rotateY(180deg)" />
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "kk-pagination",

  // 接收参数
  props: {
    count: null, // 总共有多少条要拿来分页（动态监听）
    limit: null, // 每一页要放多少
    how: null, // 你要显示多少个页码，多的会被隐藏，默认10个（由Count变化激活改变）
    val: null, // 预设页号，双向同步
    thick: null, // 是否启用底色
  },

  // 页面对象
  data: () => ({
    H: null, // 高度

    /* ------------------------------- 分割线 ------------------------------- */

    Cache: [], // 储存产生的数据
    Page: [], // 用来显示的数据

    /* ------------------------------- 分割线 ------------------------------- */

    Style: {
      Basis: "box-sizing:border-box;font-size:0vw;display:inline-block;",
      ButBox: "height:100%;",
    },

    /* ------------------------------- 分割线 ------------------------------- */

    W: document.body.clientWidth, // 获取窗口长度
  }),

  // 生命周期函数：挂载前调用
  created() {
    if (this.how) this.how = Number(this.how) || 10; // 计算显示数量
    if (this.val) this.val = Number(this.val) || 0; // 预设页数
    if (this.count && this.limit) {
      const L = Math.ceil(Number(this.count) / Number(this.limit)); // 计算需要分多少页
      this.Cache = Array.from({ length: L }, (V, I) => I); // 循环生成页码
      this.Page = this.Cache.slice(0, Number(this.how) - 1 || 9);
    }
  },

  // 生命周期函数：挂载后调用
  mounted() {
    this.H = (this.$refs.dsvg.clientHeight / this.W) * 100; // 获取组件高度
    this.Style.ButBox += `width:${this.H}vw;`; // 设置前后按钮宽度
    const S = this.H * (this.thick ? 0.45 : 1);
  },

  // 页面方法
  methods: {},
};
</script>

<style scoped>
.kk-pagination {
  /* 主容器 */
  cursor: pointer;
  height: 0.7vw;
}

.kk-pagination-icon {
  /* 左侧按钮 */
  mask: url("")
    no-repeat;
  transition: background-color 0.2s linear;
  box-sizing: border-box;
  display: inline-block;
  mask-size: 100% 100%;
  height: 100%;
  width: 100%;
}

.kk-pagination-number {
  /* 页码编号 */
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
}

.kk-pagination-svg {
  /* 页码文字 */
  transition: fill 0.2s linear;
  height: 100%;
}
</style>